<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml" xmlns:shiro="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">
<head th:include="include :: header">

</head>
<style>
	.main{
        margin: 16px 0 0 0;
        width:100%;
        height:auto;
    }
    .name{
        font-size: 14px;
        font-weight: bold;
        margin-top: 16px;
        height: 48px;
        line-height: 48px;
        padding-left: 16px;
        color: #3F4F60;
        border-radius: 4px;
        background: #fff;
    }
    .echart-box{
        background: #fff;
        padding: 16px;
        margin-bottom: 16px;
        border-radius: 4px;
    }
    .echart-box{
        clear: both;
        overflow: hidden;
    }
    .echart-box .item{
        float: left;
        width: 31%;
        margin-right: 2.333%;
        border-radius: 4px;
    }
    .echart-box .tit{
        font-size: 18px;
        margin-bottom: 24px;
        color: #06172A;
        position: relative;
        font-weight: bold;
        padding-left: 12px;
    }
    .echart-box .tit:after{
        content: '';
        width: 4px;
        height: 18px;
        background: #E64747;
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -8px;
    }
    .echart-box .text{
        color: #5a5f72;
        margin: 8px 0;
        position: relative;
        padding-left: 10px;
     }
    .echart-box .text:after{
        content: '';
        width: 4px;
        height: 14px;
        background: #2C82EB;
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -7px;
    }
    .echart-box .num{
        font-size: 30px;
        font-size: bold;
        padding-bottom: 8px;
        border-bottom: 1px solid #ccc;
    }
    .echart-box-two{
        background: #fff;
        padding: 18px;
    }
    .echart-box-two .item{
        background: #fff;
    }
    #oncescoreEcharts{
        padding-top: 20px;
    }
</style>
<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <p class="name">全国职业院校技能大赛中等职业教育 -- 母婴照护赛项</p>
    <div id="main" class="main">
        <div class="echart-box-two echart-box">
            <div class="item" style="width: 100%">
                <p class="tit">各模块得分情况</p>
                <div id="oncescoreEcharts" style="height:456px;border: 1px solid #FFC5C5;border-radius: 4px"></div>
                <table class="layui-table">
                    <!--                    <colgroup>-->
                    <!--                        <col width="150">-->
                    <!--                        <col width="150">-->
                    <!--                        <col>-->
                    <!--                    </colgroup>-->
                    <thead>
                    <tr>
                        <th></th>
                        <th>制定照护计划</th>
                        <th>居家场景-婴幼儿照护</th>
                        <th>居家场景-产妇照护</th>
                        <th>月子中心场景-婴幼儿照护</th>
                        <th>月子中心场景-产妇照护</th>
                        <th>职业素养测评</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr id="manfen">
                        <td>满分</td>
                    </tr>
                    <tr id="zuigaofen">
                        <td>最高分</td>
                    </tr>
                    <tr id="zuidifen">
                        <td>最低分</td>
                    </tr>
                    <tr id="pinjunfen">
                        <td>平均分</td>
                    </tr>
                    <tr id="fenchazhi">
                        <td>分差值</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<div th:include="include :: footer"></div>
<!--<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>-->
<script type="text/javascript" src="/js/echarts.min.js"></script>
<script type="text/javascript" >
    $(function() {

        $.ajax({
            url: "/jzweb/examinationCostStatistic/moduleScoreList",
            type: "get",
            data: {
                year:$("#year").val()
            },
            success: function (r) {
                if(r==null){
                    layer.msg("未查询到数据！");
                }
                else {
                    let getData = r.data
                    oncescoreEcharts(getData.fullList,getData.highestList,getData.lowestList,getData.averageList,getData.poorList) //各模块得分情况

                    var manfen = `<td>满分</td>`
                    $.each(getData.fullList, function(index, value) {
                        manfen+= '<td>'+value+'</td>'
                    })
                    $('#manfen').html(manfen)

                    var zuigaofen = `<td>最高分</td>`
                    $.each(getData.highestList, function(index, value) {
                        zuigaofen+= '<td>'+value+'</td>'
                    })
                    $('#zuigaofen').html(zuigaofen)

                    var zuidifen = `<td>最低分</td>`
                    $.each(getData.lowestList, function(index, value) {
                        zuidifen+= '<td>'+value+'</td>'
                    })
                    $('#zuidifen').html(zuidifen)

                    var pinjunfen = `<td>平均分</td>`
                    $.each(getData.averageList, function(index, value) {
                        pinjunfen+= '<td>'+value+'</td>'
                    })
                    $('#pinjunfen').html(pinjunfen)

                    var fenchazhi = `<td>分差值</td>`
                    $.each(getData.poorList, function(index, value) {
                        fenchazhi+= '<td>'+value+'</td>'
                    })
                    $('#fenchazhi').html(fenchazhi)

                }
            }
        });


    })
    function oncescoreEcharts(fullList,highestList,lowestList,averageList,poorList){
        var dom = document.getElementById("oncescoreEcharts");
        var myChart = echarts.init(dom);
        var option;
        option = {
            tooltip: {
                trigger: 'axis',
                show: false,
                // formatter: '{b} : {c}人',
            },
            legend: {
                x: 'center', // 图例水平居中
                y: 'top', // 图例垂直居上
                itemWidth:20
            },
            grid: {
                top: '18%',
                left: '10%',  // grid布局设置适当调整避免X轴文字只能部分显示
                right: '10%', // grid布局设置适当调整避免X轴文字只能部分显示
                bottom: '5%',
                containLabel: true, //防止坐标轴溢出
            },

            xAxis: {
                type: 'category',
                data: ['制定照护计划', '居家场景-婴幼儿照护', '居家场景-产妇照护', '月子中心场景-婴幼儿照护','月子中心场景-产妇照护','职业素养测评'],
                axisTick: {
                    alignWithLabel: true
                },
                axisLabel: {
                    show: true, // 是否显示刻度标签，默认显示
                    interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
                    rotate: -60, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
                    inside: false, // 刻度标签是否朝内，默认朝外
                    margin: 16, // 刻度标签与轴线之间的距离
                    //formatter: '{value} ' , // 刻度标签的内容格式器
                    color:'#333',
                },
            },
            yAxis: {
                type: 'value',
                splitLine:{
                    show:true,
                    lineStyle:{
                        type:'dashed'
                    }
                },
            },
            series: [

                {
                    name:'总分',
                    data: fullList,
                    type: 'bar',
                    barWidth: '10%',
                    itemStyle: {
                        color: '#FB5E58' //将颜色改为红色
                    },
                    label: {
                        show: true,
                        position: 'top',
                        color:'#3F4F60'
                    },
                },
                // {
                //     name: '满分',
                //     type: 'line',
                //     color:'#B100E5',
                //     smooth: true,
                //     lineStyle: {
                //         color: '#B100E5', // 设置线的颜色为红色
                //         type: 'dashed' // 设置为虚线
                //     },
                //     data: fullList
                // },
                {
                    name: '最高分',
                    type: 'line',
                    color:'#4D7EFF',
                    smooth: true,
                    lineStyle: {
                        color: '#4D7EFF', // 设置线的颜色为红色
                        type: 'dashed' // 设置为虚线
                    },
                    data: highestList
                },
                {
                    name: '最低分',
                    color:'#BFB3FF',
                    smooth: true,
                    lineStyle: {
                        color: '#BFB3FF', // 设置线的颜色为红色
                        type: 'dashed' // 设置为虚线
                    },
                    type: 'line',
                    data: lowestList
                },
                {
                    name: '平均分',
                    type: 'line',
                    color:'#45C8E6',
                    smooth: true,
                    lineStyle: {
                        color: '#45C8E6', // 设置线的颜色为红色
                        type: 'dashed' // 设置为虚线
                    },
                    data: averageList
                },
                {
                    name: '分差值',
                    type: 'line',
                    color:'#00CC0D',
                    smooth: true,
                    lineStyle: {
                        color: '#00CC0D', // 设置线的颜色为红色
                        type: 'dashed' // 设置为虚线
                    },
                    data: poorList
                }
            ]
        };
        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }
    }

</script>
</body>
</html>